<!DOCTYPE html>
<html lang="en">
<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <meta content="no-cache" http-equiv="Cache-Control" />
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta content="telephone=no" name="format-detection" />
  <title>留言板</title>
  <link rel="stylesheet" href="../css/weui.min.css">
  <link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div class="weui-mask loading-bg"></div>

  <div class="main" id="app">
    <div class="deliver-block" v-if="urlParams && (urlParams.openid == openid || !urlParams.openid)">
      <div class="weui-flex deliver-input">
        <textarea rows="2" placeholder="写写你的感受吧。。。" class="weui-flex__item" v-model="message" maxlength="200"></textarea>
        <div class="message-length">{{message.length}}/200</div>
        <div class="deliver-btn weui-flex">
          <a href="javascript:;" class="mb-submit-btn weui-flex" @click="addTopic">发表</a>
        </div>
      </div>
      <div class="weui-flex deliver-options">
        <label class="weui-flex" @click="radioChecked('PUBLIC')"><input type="radio" name="options" :class="{ checked: createdType == 'PUBLIC' }">公开</label>
          <label class="weui-flex" @click="radioChecked('TO_STRANGERS')"><input type="radio" name="options" :class="{ checked: createdType == 'TO_STRANGERS' }">除好友可见</label>
        <label class="weui-flex" @click="radioChecked('TO_FRIEND')"><input type="radio" name="options" :class="{ checked: createdType == 'TO_FRIEND' }">仅好友可见</label>
        <label class="weui-flex" @click="radioChecked('TO_SELF')"><input type="radio" name="options" :class="{ checked: createdType == 'TO_SELF' }">仅自己可见</label>
      </div>
    </div>

    <div class="message-list" v-if="topicList.length > 0">
      <div class="message-item" v-for="(item, index) in topicList" :class="{ 'hairline-bottom': index < topicList.length - 1 }">
        <div class="message-content weui-flex">
          <img class="header-img" src="../img/default-header.png" :data-src="item.HeadImgUrl">
          <div class="message-content-top weui-flex__item weui-flex">
            <span class="username">{{item.NickName}}</span>
            <div class="created-time">{{formatDate(item.CreatedAt)}}</div>
            <div class="message">{{item.TopicContent || '1232'}}</div>
          </div>
        </div>
        <div class="message-btns weui-flex">
          <div class="weui-flex remove" v-if="openid == item.openid" @click="removeTopic(item.TopicId)">删除</div>
          <div class="weui-flex" @click="addComoentForTopicId.indexOf(item.TopicId) < 0 ? addComoentForTopicId.push(item.TopicId) : addComoentForTopicId.splice(addComoentForTopicId.indexOf(item.TopicId), 1)">
            <img src="../img/comment.png">评论 &nbsp;{{item.TopicCommentNum > 0 ? '(' + item.TopicCommentNum + ')' : ''}}
          </div>
          <div class="weui-flex" @click="praiseTopic(item)">
            <img :src="item.PraiseId ? '../img/praise.png' : '../img/thumbs-up.png'">赞 &nbsp;{{item.TopicPraise > 0 ? '(' + item.TopicPraise + ')' : ''}}
          </div>
        </div>
        <div class="reply-block">
          <div v-for="comment in commentList" v-if="comment.ToTopic == item.TopicId" @click="clickComment(item, comment)">
            <span class="username">{{comment.NickName}}</span><span v-if="comment.ToComment"> 回复 <span class="username">{{comment.ToNickName}}</span></span>：{{comment.CommentContent}}
          </div>
        </div>
        <div class="weui-flex comment-block" :class="{ 'show-input': addComoentForTopicId.indexOf(item.TopicId) >= 0 }">
          <input placeholder="发表你的看法。。。" class="" v-model="item.comment" maxlength="100" @input="consoleItem(item, index, item.comment)">
          <div class="message-length">{{ item.comment ? item.comment.length : 0 }}/100</div>
          <div class="deliver-btn weui-flex">
            <a class="replay-btn weui-flex" @click="createComment(item)">评论</a>
          </div>
        </div>
      </div>
    </div>

    <div class="no-data" v-if="topicList.length == 0">
      <img src="../img/no-data.png">
      <span>该用户没有留言</span>
    </div>
  </div>

<script type="text/javascript" src="../js/tools/weui.js"></script>
<script type="text/javascript" src="../js/tools/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../js/tools/vue.js"></script>
<script type="text/javascript" src="../js/common/common.js"></script>
<script type="text/javascript" src="../js/serviceInterface/serviceInterface.js"></script>
<script type="text/javascript" src="../js/pages/message_board.js"></script>
</body>
</html>